<template>
  <span style="text-align: center;color: #24dcf3;font-size: 40px"  >展览</span>
  <div class="recent">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :stretch="true" >
      <el-tab-pane label="所有" name="first">
<!--        混合内容展示-->
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in exhibitionData" :key="item">
<!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
<!--            得有一个显示:更多 的功能-->
              <div class="DataLi">
                <img :src="item.cover" >
                <div >名称: {{item.name}}</div>
                <div >地点: {{item.location}}</div>
                <div style="display: flex;justify-content: center;">时间: {{item.startTime}}至{{item.endTime}}
                  <div style="margin-left: 10px">
                    <el-tag type="success" v-if="item.status === '在展'">{{item.status}}</el-tag>
                    <el-tag type="primary" v-if="item.status === '未开展'">{{item.status}}</el-tag>
                    <el-tag type="warning" v-if="item.status === '即将结束'">{{item.status}}</el-tag>
                    <el-tag type="danger" v-if="item.status === '已结束'">{{item.status}}</el-tag>
                  </div>
                </div>

              </div>
              <div v-if="item.status === '已结束' || item.status === '未开展'">
                <el-button type="primary" @click="$router.push('/exhibitionDetail?id=' + item.id)">在线浏览</el-button>
              </div>
              <div v-else>
                <el-button type="success" @click="$router.push('/appointment')">在线预约</el-button>
              </div>
          </el-card>
        </div>

      </el-tab-pane>
<!--      读取近期展览内容-->
      <el-tab-pane label="近期展览" name="second" >
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in exhibitionData" :key="item">
            <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
            <!--            得有一个显示:更多 的功能-->
            <div class="DataLi">
              <img :src="item.cover">
              <div style="text-overflow: ellipsis;overflow:hidden;">名称: {{item.name}}</div>
              <div style="text-overflow: ellipsis;overflow:hidden;">地点: {{item.location}}</div>
              <div style="display: flex;justify-content: center;">时间: {{item.startTime}}至{{item.endTime}}
                <div style="margin-left: 10px">
                  <el-tag type="success" v-if="item.status === '在展'">{{item.status}}</el-tag>
                  <el-tag type="primary" v-if="item.status === '未开展'">{{item.status}}</el-tag>
                  <el-tag type="warning" v-if="item.status === '即将结束'">{{item.status}}</el-tag>
                </div>
              </div>
            </div>
            <div v-if="item.status === '未开展'">
              <el-button type="primary" @click="$router.push('/exhibitionDetail?id=' + item.id)">在线浏览</el-button>
            </div>
            <div v-else>
              <el-button type="success" @click="$router.push('/appointment')">在线预约</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历年展览" name="third">
        <div class="exhibitionCard">
          <el-card class="box-card"  v-for="item in exhibitionData" :key="item.id">
            <!--              需要展览名 展览地点 展览时间 展览状态 是否需要预约(预约按钮) 封面图-->
            <!--            得有一个显示:更多 的功能-->
            <div class="DataLi">
              <img :src="item.cover" >
              <div>名称: {{item.name}}</div>
              <div>地点: {{item.location}}</div>
              <div style="display: flex;justify-content: center;">时间: {{item.startTime}}至{{item.endTime}}
                <div style="margin-left: 10px">
                  <el-tag type="danger" v-if="item.status === '已结束'">{{item.status}}</el-tag>
                </div>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="$router.push('/exhibitionDetail?id=' + item.id)">在线浏览</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
<!--   更多 这个功能显示的位置不对-->
<!--    <el-button type="primary"> 更多</el-button>-->

    <!--    分页功能,来自element ui-->
    <div class="pagination" style="margin-top: 20px">
      <el-pagination
          background
          :current-page="state.params.pageNum"
          :page-size="state.params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="state.total">
      </el-pagination>
    </div>
  </div>

</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
// import type { TabsPaneContext } from 'element-plus'
import request from "../../../../front_admin/src/utils/request";
const activeName = ref('first')

const state = reactive({
  total: 0,
  params:{
    pageNum:1,
    pageSize:6,
    status:'',
  },
})

const exhibitionData = ref([])
const handleClick = (tab, event) => {
  if(tab.props.label == '历年展览'){
    state.params.status= '已结束'
  }else if(tab.props.label == '近期展览'){
    state.params.status= '展'
  }else{
    state.params.status =''
  }

  onload()
  console.log(tab, event)
}

const handleCurrentChange = (pageNum) => {
  //  点击分页按钮实现分页
  state.params.pageNum=pageNum
  onload()
}
const onload=()=>{
  request.get('/exhibition/userPage',{
    params:{
      pageNum: state.params.pageNum,
      pageSize: state.params.pageSize,
      status: state.params.status
    }
  }).then(res => {
    if(res.code === '200') {
      console.log(res)
      // this.tableData = res.data.list
      state.total = res.data.total
      exhibitionData.value = res.data.list
      // console.log("exeiowhoahoa内勇士",exhibitionList)

      // console.log(this.params)
    }
  })
}
onMounted(()=>{
  onload()
})

//立即响应的空数组
</script>

<style scoped>
.recent{
  width:90%;
  margin:15px auto;
  display: flex;
  justify-content: center;
  flex-direction: column;

}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.exhibitionCard{
  display: flex;
  float: left;
  flex-wrap: wrap;
  justify-content: space-between;
  width:100%;
}
.box-card{
  width: 420px;
  /*padding: 10px;*/
  margin-bottom: 15px;
  margin-right: 10px;
}

.DataLi img{
  width: 250px;
  height: 250px;
}
.pagination{
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.DataLi{
  /*display: inline-block;*/
  /*width: 150px;*/
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  white-space: nowrap; /* 溢出不换行 */
}
</style>